<template>
	<view class="mark">
		<view class="view">
			<view class="close-btn" @click="closeFn()">
				<view class="iconfont iconclose1"></view>
			</view>
			<text class="title">{{ title }} {{ item._localVersion }} => {{ item._newVersion }}</text>
			<!-- <view class="tip">资源下载地址 {{ downLoadUrl }}</view> -->
			<view class="tip">新版更新内容</view>
			<view class="scroll-box">
			<scroll-view class="scroll" scroll-y>
				<view class="item" v-for="(val,index) in contents" :key="index">
					{{val}}
				</view>
			</scroll-view>
			</view>
			<view v-if="!downloading" class="btns">
				<image class="icon" src="/static/icon_update01.png"></image>
				<view class="sure" @click="onSureUpdate()">马上升级</view>
			</view>
			<view class="progress-box" v-if="downloading">
				<view class="smallTitle">
				  <text class="tip-txt">下载进度:{{ progress }}%</text>
				  <progress :percent="progress" stroke-width="4" />
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visible:false,
				progress: 0,
				downloading: false,
				success: true,
				contents:[],
				downLoadUrl: ''
			};
		},
		props:{
			show:{
				type:Boolean,
				default: false
			},
			title:{
				type:String,
				default:'版本更新'
			},
			content:{
				type:String,
				default:''
			},
			item:{
				type:Object,
				default:()=>{
					return {}
				}
			}
		},
		created() {
			this.visible = this.show;
			var strs = this.content.split('\n')
			for (var i = 0; i < strs.length; i++) {
				this.contents.push(strs[i])
			}
		},
		methods:{
			//升级
			onSureUpdate(){
				this.downloading = true;
				let _downUrl = '';
				if(this.item.force_update){//强制安装包
					// 判断系统类型
					if (plus.os.name.toLowerCase() === 'android') {
						_downUrl = this.item.apkUrl;
					}else{
						_downUrl = this.item.ipa_url;
						// 苹果：打开商店链接
						plus.runtime.openURL(_downUrl);
						return false
					}
				}else{
					_downUrl = this.item._wgtUrl;
				}
				this.downLoadUrl = _downUrl
				var downloadTask = uni.downloadFile({
					url: _downUrl,
					success: (downloadResult) => {
						console.log(downloadResult);
						if (downloadResult.statusCode === 200) {
							plus.runtime.install(downloadResult.tempFilePath, {
								force: false
							}, function() {
								this.success = true;
								plus.runtime.restart();
								this.closeFn();
							}, (e) => {
								console.log(e);
								this.success = false;
								this.closeFn();
								uni.showToast({
									title: '安装升级包失败',
									icon: 'none'
								})
							});
						}
					},
					fail: () => {
						uni.showModal({
							title: 'Download Fail',
							content: _downUrl,
							showCancel: false
						})
					}
				});
				downloadTask.onProgressUpdate((e)=>{
					this.progress = e.progress
				})
			},
			closeFn(){
				this.$emit('close',false);
			}
		},
	}
</script>

<style lang="stylus" scoped>
@import '../stylus/mixin.styl'
.mark
	position fixed
	top 0
	left 0
	height 100vh
	width 100vw
	background: rgba(0,0,0,0.6)
	display flex
	flex-flow row nowrap
	justify-content center
	align-items center
	z-index 1000
	.view
		width 50vw
		height 70vh
		background-color white
		border-radius 15upx
		display flex
		flex-flow column
		justify-content flex-start
		align-items center
		position relative
		.close-btn{
			position absolute
			right 6px
			top 8px
			padding 0 6px
			.iconclose1{
				font-size px2rem(60rpx)
			}
		}
	.title
		margin-top 20upx
		color #006dfe
		font-weight bold
		font-size px2rem(38px)
		text-align center
	.tip
		margin-top 20upx
		margin-left 30upx
		margin-bottom 10upx
		align-self flex-start
		font-size px2rem(32px)
		font-weight 600
		color black
	.scroll-box
		width 100%
		flex 1 0 0
		overflow hidden
	.scroll
		width 100%
		height 100%
		display flex
		flex-flow column
		justify-content flex-start
		align-items flex-start
	.item
		margin-left 50upx
		text-align left
		font-size px2rem(30px)
	.btns
		width 100%
		display flex
		flex-flow row nowrap
		justify-content center
		align-items center
		margin-bottom px2rem(20px)
	.icon
		width px2rem(45px)
		height px2rem(45px)
		margin-right 10upx
	.sure
		padding px2rem(30px) 0
		text-align center
		color #006dfe
		font-size px2rem(35px)
		font-weight 500
	.progress-box
		width 100%
		margin-bottom px2rem(80px)
		box-sizing border-box
	.smallTitle
		padding 0 px2rem(70px)
		font-size px2rem(28px)
		text-align center
		.tip-txt
			display inline-block
			font-size px2rem(24px)
			color #888888
			margin-bottom px2rem(8px)
</style>
